<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" currBg="usuallyBg" :needConBlock="true">
			<block slot="content">增加预约办事</block>
		</custom-nav-sq-xcx>
		<sq-screen-area :formFlag="true" :needBtnFlag="true">
			<block slot="formContent">
				<view class="sqFormWrap">
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>预约时间</view>
						<view class="formCon">
							<picker class="pickerView" mode="date" :value="yyDate" fields="day" @change="bindDateChange"
								start="2010-01-01">
								<view class="yyDate" :class="[yyDate == '请选择预约日期' ? '' : 'hasSel']">{{yyDate}}</view>
							</picker>
						</view>
					</view>
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>姓名</view>
						<view class="formCon">
							<input class="formInp" type="text" v-model="userName" placeholder="请输入您的姓名" maxlength="6"
								placeholder-style="color:#8789B1" />
						</view>
					</view>
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>手机号码</view>
						<view class="formCon">
							<input class="formInp" type="tel" v-model="mobile" placeholder="请输入您的手机号码"
								placeholder-style="color:#8789B1" />
						</view>
					</view>
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>事件名称</view>
						<view class="formCon">
							<input class="formInp" type="text" v-model="yyTit" placeholder="请输入预约事件名称(40字内)"
								maxlength="40" placeholder-style="color:#8789B1" />
						</view>
					</view>
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>事件描述</view>
						<view class="formCon spec">
							<textarea class="formTxtarea" placeholder="请输入预约事件描述(200字内)" maxlength="200"
								placeholder-style="color:#8789B1"></textarea>
						</view>
					</view>
					<view class="formItem">
						<view class="formTit">上传图片<text>(选填)</text></view>
						<view class="uni-uploader-body" style="margin-top: -10rpx;">
							<view class="uni-uploader__files">
								<block v-for="(image,index) in albumList" :key="index">
									<view class="uni-uploader__file">
										<view class="iconfont icon-guanbi" @tap="delect(index)"></view>
										<image class="uni-uploader__img" :src="image" :data-src="image"
											@tap="previewImage" mode="aspectFill"></image>
									</view>
								</block>
								<view class="uni-uploader__input-box" v-show="hasFullFlag">
									<view class="uni-uploader__input" @tap="chooseImage"></view>
								</view>
							</view>
						</view>
						<view class="uni-uploader-head">
							<view class="uni-uploader-title">注:最多上传6张图片<text>({{albumList.length}}/6)</text></view>
						</view>
					</view>
				</view>
			</block>
			<block slot="formBtn">
				<button class="comBtn sq hasBorRad" :disabled="btnDisabFlag" @tap="goSubmit">{{btnTit}}</button>
			</block>
		</sq-screen-area>
	</view>
</template>

<script>
	import SqScreenArea from "@/components/sq-screen-area";
	import upMultiImg from '@/mixins/upMultiImg.js'
	export default {
		components: {
			SqScreenArea
		},
		mixins: [upMultiImg],
		data() {
			return {
				yyDate: '请选择预约日期',
				userName: '',
				mobile: '',
				yyTit: '',
				pathName: 'sqSys/sqYy', //社区预约
			}
		},
		computed: {

		},
		methods: {
			bindDateChange(e) {
				this.yyDate = e.detail.value;
			},
			goSubmit() {
				uni.navigateTo({
					url: '/pages/subSqIndex/sqRes/sqRes?fromPage=yybsRes'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("/static/css/common/uni.css");
	@import '@/static/scss/addYybs.scss';
</style>